<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="一款可视化采集器,支持各种数据保存方式">
    <meta name="author" content="LarryFranken">
    <title>Termux Web API</title>


    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      .plist .form-label{
        margin-top:0.5rem;
      }
    .plist span{
      margin-left:0.5rem;
      color:red;
      text-align:right;
    }
    .configlistbtn{
     
      display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; 
      text-align: center;
    }
    .configlistbtn div{
      text-align: center;
      display:inline-block;
       white-space: nowrap;
      width:auto; 
      height:auto;
      overflow:hidden;
    }
    #shell_key{
        font-size: 0.5rem;
        color: #8e8e8e;
        position: relative;
        top: 0.15rem;
        left: 0.5rem;
    }
    </style>

    
    <!-- Custom styles for this template -->
  </head>
  <body class="bg-light">

<button type="button" id="bem1" style="display:none" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#em1">
  编辑
</button>
<div class="modal fade" id="em1" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">编辑</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 在这里添加您要编辑的内容 -->
        
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">修改内容</label>
            <input type="email" id="ibem1" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" id="cbem1" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" id="bbem1" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

<button type="button" id="bem2" style="display:none" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#em2">
  加载配置
</button>
<div class="modal fade" id="em2" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">加载配置</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 在这里添加您要编辑的内容 -->
        
      </div>
      <div class="modal-footer">
        <button type="button" id="cbem2" style="display:none" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
             </div>
    </div>
  </div>
</div>
    
<div class="container">
  <main>
    <div class="py-5 text-center">
      <img style="display:none;" class=" mx-auto mb-4" src="/static/img/bootstrap-logo.svg" alt="" width="72" height="57">
      <h2>Termux Web API</h2>
      <p class="lead">a shell command that can be executed through AJAX requests, such as apt python shell scripts. Monitor the execution results. The built-in API interface can be extended to any app or remote location</p>
    </div>

    <div class="row g-5" >
      <div class="col-md-5 col-lg-4 order-md-last">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-primary">菜单</span>
          <span class="badge bg-primary rounded-pill"></span>
        </h4>


        <ul class="list-group mb-3" >
          <li class="tt list-group-item d-flex justify-content-between bg-light">
            <div class="text-primary">
              <h6 class="my-0">执行</h6>
              <small class="text-primary">run test</small>
            </div>
            <span class="text-muted"></span>
          </li>
          <li id='logout' class="tt list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">退出登陆</h6>
              <small class="text-muted" >logout</small>
            </div>
            <span class="text-muted"></span>
          </li>

          <li class="tt list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">规划中</h6>
              <small class="text-muted">Planning in progress</small>
            </div>
          </li>
          
          <p style="text-align:right;margin-top:1rem"> ---- LarryFranken</p>
        </ul>

        
      </div>
      <div class="col-md-7 col-lg-8 center" style="padding-bottom:10rem">

<div class="zz" >
    
<div class="row g-3" style="padding-bottom:0.5rem">        
    <div class="col-sm-6 col-md-9">
      <input type="text" class="form-control" name="shell_input" placeholder="python3 bin/test_server.py" value="" required>
    </div>
    <div class="col-sm-6 col-md-3">
      <button type="button" style="width:100%" class="btn btn-primary" onclick="shell_start()">
            执行
      </button>
    </div>
</div>  

<div class="row g-3" >  
    <div class="accordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class=" accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            日志&nbsp; 
            <div class="log5loading spinner-grow spinner-grow-sm" role="status" style="display:none">
                <span class="visually-hidden">Loading...</span>
            </div><span id="shell_key"style></span>
          </button>
          
        </h2>
        <div  class="accordion-collapse collapse show log5body" style="height: 30rem;overflow-y: auto;" data-bs-parent="#accordionExample">
          <div class="accordion-body" >
            <pre style="min-height: 29rem;"><code id="log5"></code></pre>
          </div>
        </div>
      </div>
    </div>

</div>
</div>
    


      </div>
    </div>
  </main>

</div>
{% csrf_token %}
<script src="/static/js/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script src="/static/plugin/Pop/plug-in.js"></script>
<script type="text/javascript">


function log5(){
    shell_key = $("#shell_key").html()   
    $('.log5loading').show()
    $.get("{% url 'shell' %}?id="+shell_key, function(response){
        console.log(1)
        $('#log5').html(response.data.msg)
        $('.log5body').scrollTop($('.log5body').get(0).scrollHeight);

        if(response.status != "success"){
            setTimeout(log5,2000)
        }else{
            $('.log5loading').hide()
        }
    })
}
function shell_start(argument) {
    var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
    var shell_input = $('input[name="shell_input"]').val()
    if (shell_input == "") {
        $.Pop({'title':'提示','html':'请输入指令'},'alert')
        return 0
    }
    $.post("{% url 'shell' %}",{shell_input:shell_input,csrfmiddlewaretoken:csrfmiddlewaretoken},function(result){
        $.Pop({'title':'提示','html':'执行秘钥为<br/>'+result.data.key},'alert')
        $("#shell_key").html(result.data.key)
        log5()

    });
    
}
    

    $(function(){
        $("#logout").click(function (argument) {
            $.Pop({'title':'注意','html':'确定要退出吗？'},'confirm',function(){
                window.location.href = '{% url 'logout' %}'
            })
        })
    })
</script>
  </body>
</html>
